<template>
  <div class="theme-activities">
    <panel-title>
      <template>
        <span class="font24 font333">
          精心挑选，为您的健康
        </span>
      </template>
    </panel-title>
    <div class="show-box">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548226502168&di=66d4089719bf663e64e51671d3a47d6e&imgtype=0&src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg"/>
      <div class="scroll-box">
        <scroll-box></scroll-box>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import PanelTitle from './panel-title.vue';
import ScrollBox from './scrollBox-horizontal.vue';
import SignCommodity from './single-commodity-vertical.vue';
@Component({
  components: {
    PanelTitle,
    ScrollBox,
    SignCommodity,
  },
})
export default class TopSearch extends Vue {
}
</script>
<style lang="scss" scoped>
.theme-activities {
  width: 100%;
  height: 782px;
  .show-box {
    position: relative;
    img {
      width: 100%;
      height: 360px;
    }
    .scroll-box {
      position: absolute;
      width: 100%;
      top: 280px;
      overflow-x: auto;
    }
  }
}
</style>
